<template>
  <view>
    <!-- 1.0 关于地址 -->
    <view class="address">
      <!-- 1.1 有地址 -->
      <view class="address_info" v-if="address.userName">
        <text class="address_detail">{{ addressDetail }}</text>
        <view class="addressee_bottom">
          <text class="addressee_info">{{ address.userName }}</text>
          <text class="addressee_info">{{ address.telNumber }}</text>
        </view>
      </view>
      <!-- 1.2空状态 -->
      <view class="selectAddress" v-else>
        <!-- 调取微信地址接口！ -->
        <view class="emptyAddress" @tap="getAddressHandle">请选择地址</view>
      </view>
      <!-- <view class="divider"></view> -->
    </view>
    <!-- 2.0 关于商品列表 -->
    <view class="goods_list">
      <view class="goods_list_title">已选商品</view>
      <view v-for="item in cartList" :key="item.goods_id" class="goods_item">
        <!-- block是一个空标签 相当于是vue的template -->
        <!-- 要写v-if因为是被选择的情况才可以！！ -->
        <GoodsItem :item="item" v-if="item.goods_selected">
          <view class="goods_item_count">X{{ item.goods_count }}</view>
        </GoodsItem>
      </view>
    </view>
    <!-- 3.0 底部栏 -->
    <view class="bottom">
      <text class="total_text">合计</text>
      <text class="total_price price">{{ totalPrice }}</text>
      <view class="account" @tap="payHandle">去支付（{{ account }}）</view>
    </view>
  </view>
</template>

<script>
import GoodsItem from "@/components/GoodsItem/index.vue";
import { checkOrders, getPayParams, ordersCreate } from "@/api";
export default {
  data() {
    return {
      // address,  在data里面的return出来的一定是一个对象！！
      address: {},
      cartList: [],
    };
  },
  components: {
    GoodsItem,
  },
  onLoad() {
    // 初始化时将值赋在data里的数据中
    this.address = uni.getStorageSync("address") || {};
    // 初始化时，也需要在这里获取选中的购物车carList数据：
    this.cartList = uni.getStorageSync("cartList");
  },
  // 如果要计算出一个新的变量！就要算出一个计算属性
  computed: {
    // 计算出详细地址：
    addressDetail() {
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    totalPrice() {
      let totalPrice = 0;
      this.cartList.forEach((item) => {
        //  如果都选中，就计算单价乘数量：
        if (item.goods_selected) {
          totalPrice += item.goods_price * item.goods_count;
        }
      });
      return totalPrice;
    },
    // 计算个数：
    account() {
      let account = 0;
      this.cartList.forEach((item) => {
        if (item.goods_selected) {
          account += item.goods_count;
        }
      });
      return account;
    },
  },
  methods: {
    getAddressHandle() {
      // 获取用户的收货地址！
      uni.chooseAddress({
        success: (res) => {
          console.log(res); //编辑完成后返回用户选择的地址
          // 要点击确定才行：
          this.address = res;
          uni.setStorageSync("address", res);
        },
      });
    },
    async payHandle() {
      // 数据goods 先过滤！！再map
      const goods = this.cartList
        .filter((item) => item.goods_selected)
        .map((item) => {
          return {
            goods_id: item.goods_id,
            goods_number: item.goods_count,
            goods_price: item.goods_price,
          };
        });
      try {
        // 处理一下订单创建所需要的数据
        // console.log(goods);
        // 订单一：创建订单：
        // const res = await ordersCreate({
        //   //传里面需要的参数：
        //   order_price: this.totalPrice, //总价
        //   consignee_addr: this.addressDetail, //收货地址
        //   goods: goods,
        // });
        // console.log(res); //这里的结果返回的是一个promise！！所以呢，就需要用async await的方法！！还需要try catch！！
        // 在这里需要获取订单号！！所以需要解构！！！
        // 需要查询订单是否成功咯！！ 以便弹窗：提示用户 所以需要获取订单号！！
        const { order_number } = (
          await ordersCreate({
            //传里面需要的参数：
            order_price: this.totalPrice, //总价
            consignee_addr: this.addressDetail, //收货地址
            goods: goods,
          })
        ).data.message; //解构：res.data.message
        console.log(order_number);
        // 订单二：生成预付订单！！
        const { pay } = (
          await getPayParams({
            // 写订单号：让后端生成所需要的参数，然后调起微信支付：
            // 这里填支付应该调用的参数：
            order_number,
          })
        ).data.message;
        console.log(pay); //pay 里面的参数是发起微信支付所需要的！！

        // 订单三：发起微信支付：
        await wx.requestPayment(pay);
        // 订单四：查询订单是否成功
        await checkOrders({
          // 放置查询订单是否成功的参数：
          order_number,
        });
        uni.showToast({
          title: "支付成功",
          duration: 2000,
        });
        // 并且将本地存储的数据删除；
        // 将未选中的商品添加进本地存储！
        // const cartList = this.cartList.forEach((item) => {
        //   !item.goods_selected;
        // });   这里可以用遍历么？？
        const cartList = this.cartList.filter((item) => !item.goods_selected);
        uni.setStorageSync("cartList", cartList);
        // 成功之后就要跳转到订单页！！
        uni.redirectTo({
          url: "../order/main",
        });
      } catch (error) {
        // 统一处理失败的情况：
        // 弹窗提示：
        uni.showToast({
          title: "支付失败，请稍后再试……",
          icon: "none",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="less" >
page {
  // padding: 0 40rpx;
  background-color: #f9f9f9;
  min-height: calc(100vh + 130rpx);
  .address {
    min-height: 188rpx;
    margin: 20rpx;
    background-color: #fff;
    border-radius: 5rpx;
    .selectAddress {
      display: flex;
      // display: none;
      justify-content: center;
      align-items: center;
      height: 100%;
      .emptyAddress {
        margin: 50rpx 204rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300rpx;
        height: 89rpx;
        font-size: 30rpx;
        border-radius: 45rpx;
        color: var(--mainColor);
        border: 1rpx solid var(--mainColor);
      }
    }
    .address_info {
      // display: none;
      padding: 20rpx;
      .address_detail {
        font-size: 30rpx;
      }
      .addressee_bottom {
        margin-top: 30rpx;
        .addressee_info {
          margin-right: 60rpx;
          color: #434343;
          font-size: 26rpx;
        }
      }
    }
    // .divider {
    //   height: 35rpx;
    // }
  }
}
.goods_list {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 5rpx;
  .goods_list_title {
    height: 88rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
  }
  .goods_item {
    position: relative;
    .goods_item_count {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      color: #656565;
      font-size: 28rpx;
    }
  }
}
// 底部栏
.bottom {
  background-color: #fff;
  box-sizing: border-box;
  position: fixed;
  align-items: center;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 83rpx;
  // width: 750rpx;
  padding: 0 20rpx;
  .total_text {
    font-size: 28rpx;
  }

  .price {
    flex: 1;
    font-size: 28rpx;
  }

  .account {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18rpx 10rpx;
    border-radius: 40rpx;
    color: #fff;
    font-size: 21rpx;
    background-color: #b6b6b6;
  }
}
</style>